@import '@material/icon-button/mixins.import';
@import '../mdc-helpers/mdc-helpers';
@import '_button-base';

@include mdc-icon-button-without-ripple($query: $mat-base-styles-query);

.mat-mdc-icon-button {
  @include _mat-button-interactive() {
    border-radius: 50%;
  }

  // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
  border-radius: 50%;

  @include _mat-button-disabled();

  // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
  // and don't actually do anything. This undoes those conflicting styles.
  &.mat-unthemed,
  &.mat-primary,
  &.mat-accent,
  &.mat-warn {
    &:not(.mdc-ripple-upgraded):focus::before {
      background: transparent;
      opacity: 1;
    }
  }
}
